<template>
  <table-custom
    :table-data="tableData"
    :columns="columns"
    v-model:currentPage="currentPage"
    show-pagination
    :total="total"
    :operations="operations"
    @operation="handleTableOperation"
    @load-data="loadData"
  />
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import tableCustom from '@/components/tableCustom.vue'

const emits = defineEmits(['operation', 'update:current-page', 'load-data'])

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  operations: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  }
})

const currentPage = ref(10)

const handleTableOperation = ({ name, row }) => {
  emits('operation', { name, row })
}

const loadData = val => {
  emits('update:current-page', val.currentPage)
  emits('load-data', val)
}
</script>

<style lang="scss" scoped></style>
